<form class="register-form" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm($event,validateForm.value)">
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="7">
            <label nz-form-item-required>Username</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control nzHasFeedback>
            <nz-input formControlName="username" [nzType]="'text'" [nzPlaceHolder]="'async validate try to write JasonWood'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('required')">Please input your username!</div>
            <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('duplicated')">The username is redundant!</div>
            <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').pending">Validating...</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="7">
            <label nz-form-item-required>E-mail</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control nzHasFeedback>
            <nz-input formControlName="email" [nzPlaceHolder]="'email'" [nzType]="'email'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">The input is not valid E-mail!</div>
            <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('required')">Please input your E-mail!</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="7">
            <label nz-form-item-required>BirthDay</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control>
            <nz-datepicker formControlName="birthDay" [nzSize]="'large'" [nzPlaceHolder]="'Choose your birthday'" style="width: 100%;"></nz-datepicker>
            <div nz-form-explain *ngIf="getFormControl('birthDay').dirty&&getFormControl('birthDay').hasError('required')">Please input your birthday!</div>
            <div nz-form-explain *ngIf="getFormControl('birthDay').dirty&&getFormControl('birthDay').hasError('expired')">Birthday must less than today!</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-col [nzSpan]="7" nz-form-label>
            <label nz-form-item-required>Password</label>
        </div>
        <div>
            <div nz-col [nzSpan]="12" nz-form-control nzHasFeedback>
                <nz-input formControlName="password" [nzPlaceHolder]="'password'" [nzType]="'password'" [nzSize]="'large'" (ngModelChange)="validateConfirmPassword()"></nz-input>
                <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">Please input your password!</div>
            </div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-col [nzSpan]="7" nz-form-label>
            <label nz-form-item-required>Confirm Password</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control nzHasFeedback>
            <nz-input formControlName="passwordConfirmation" [nzType]="'password'" [nzPlaceHolder]="'confirm your password'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('passwordConfirmation').dirty&&getFormControl('passwordConfirmation').hasError('required')">Please confirm your password!</div>
            <div nz-form-explain *ngIf="getFormControl('passwordConfirmation').dirty&&getFormControl('passwordConfirmation').hasError('confirm')">Two passwords that you enter is inconsistent!</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-col [nzSpan]="7" nz-form-label>
            <label nz-form-item-required>Comment</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control>
            <nz-input formControlName="comment" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'write any thing'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('comment').dirty&&getFormControl('comment').hasError('required')">Please write something here!</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-col [nzSpan]="7" nz-form-label>
            <label nz-form-item-required>性别</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="12">
            <nz-radio-group formControlName="sex">
                <label nz-radio [nzValue]="'boy'">
                    <span>男</span>
                </label>
                <label nz-radio [nzValue]="'girl'">
                    <span>女</span>
                </label>
            </nz-radio-group>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-col [nzOffset]="7" [nzSpan]="12" nz-form-control>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" [disabled]="!validateForm.valid">Submit</button>
            <button nz-button [nzSize]="'large'" (click)="resetForm($event)">Reset</button>
            <button nz-button [nzSize]="'large'" routerLink="../login">login</button>
        </div>
    </div>
</form>